<template>
  <div class="enterpost_container">
    <div class="top">
           
      <!-- 查询栏左侧 -->
           
      <div
        class="top-left"
        style="
          position: relative;
          float: left;
          width: 70%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          line-height: 60px;
        "
      >
                姓名：        
        <el-input size="mini" v-model="input1" style="width: 100px"> </el-input>
                岗位：        
        <el-input size="mini" v-model="input2" style="width: 100px"> </el-input>
                用工性质：        
        <el-input size="mini" v-model="input3" style="width: 100px"> </el-input>
                入职时间：        
        <el-date-picker
          v-model="value1"
          type="daterange"
          size="mini"
          style="width: 180px"
          range-separator="——"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
                 
        </el-date-picker>
             
      </div>
           
      <!-- 查询栏右侧 -->
           
      <div
        class="top-right"
        style="
          position: relative;
          float: right;
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 30vh;
        "
      >
               
        <el-row style="position: absolute; top: 12px">
                    <el-button type="primary" size="small">查询</el-button>    
                <el-button type="primary" size="small">上传</el-button>        
            <el-button type="primary" size="small">下载</el-button>        
        </el-row>
             
      </div>
         
    </div>
    <div class="container_main">
      <el-table
    :data="tableData"
    border
    header-align="center"
    style="width: 100%">
    <el-table-column
      prop="empId"
      label="序号"
      width="50">
    </el-table-column>
    <el-table-column
      prop="empName"
      label="姓名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="empJob"
      label="岗位"
      width="150">
    </el-table-column>
    <el-table-column
      prop="empDept"
      label="项目安排"
      width="150">
      <template slot-scope="scope">
              <el-input v-model="scope.row.empDept" 
                        v-if="scope.row.seen"> </el-input>
              <span style="margin-left: 10px" v-else>{{ scope.row.empDept }}</span>
            </template>
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="70">
    </el-table-column>
    <el-table-column
      prop="empFamiAddress"
      label="户口所在地"
      width="200">
    </el-table-column>
    <el-table-column
      prop="empDegree"
      label="学历"
      width="70">
    </el-table-column>
    <el-table-column
      prop="employment"
      label="用工性质"
      width="80">
    </el-table-column>
    <el-table-column
      prop="empHirDate"
      label="入职时间"
      width="200">
    </el-table-column>
    <el-table-column
      prop="empSal"
      label="薪资（正式）"
      width="150">
    </el-table-column>
    <el-table-column
      prop="empPerAna"
      label="人员性格分析"
      width="300">
      <template slot-scope="scope">
              <el-input v-model="scope.row.empPerAna" 
                        v-if="scope.row.seen"> </el-input>
              <span style="margin-left: 10px" v-else>{{ scope.row.empPerAna }}</span>
            </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="157">
      <template slot-scope="scope">
      <el-button
          size="mini"
          v-if="!scope.row.seen"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          v-if="!scope.row.seen"
          @click="open(scope.$index, scope.row)">删除</el-button>
      <el-button
          size="mini"
          v-if="scope.row.seen"
          @click="handleEdit(scope.$index, scope.row)">保存</el-button>
        <el-button
          size="mini"
          type="danger"
          v-if="scope.row.seen"
          @click="handlefass(scope.$index, scope.row)">取消</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1:'',
      input2:'',
      input3:'',
      input4:'',
      value1:'',
      value2:'',
      isShowDeleteDialog: false, //是否显示点击删除按钮之后的弹框
    isRow: '', //这里存储点击删除时，该按钮所处的行数
      tableData: [{
          empId: 1,
          seen:false,
          empName: '王小虎',
          empJob: '前端工程师',
          empDept:'朗驰管理系统',
          sex:'男',
          empFamiAddress:'山西省朔州市朔城区清水湾金宇李香山',
          empDegree:'本科',
          employment:'试用期',
          empHirDate:'2022-10-22',
          empSal:'3500-6500',
          empPerAna:'性格开朗，勤奋好学，努力上进，艰苦奋斗，勇于创新'

        },{
          empId: 2,
          seen:false,
          empName: '王小虎',
          empJob: '前端工程师',
          empDept:'朗驰管理系统',
          sex:'男',
          empFamiAddress:'山西省朔州市朔城区清水湾金宇李香山',
          empDegree:'本科',
          employment:'试用期',
          empHirDate:'2022-10-22',
          empSal:'3500-6500',
          empPerAna:'性格开朗，勤奋好学，努力上进，艰苦奋斗，勇于创新'

        },
        {
          empId: 3,
          seen:false,
          empName: '王小虎',
          empJob: '前端工程师',
          empDept:'朗驰管理系统',
          sex:'男',
          empFamiAddress:'山西省朔州市朔城区清水湾金宇李香山',
          empDegree:'本科',
          employment:'试用期',
          empHirDate:'2022-10-22',
          empSal:'3500-6500',
          empPerAna:'性格开朗，勤奋好学，努力上进，艰苦奋斗，勇于创新'

        },
        {
          empId: 4,
          seen:false,
          empName: '王小虎',
          empJob: '前端工程师',
          empDept:'朗驰管理系统',
          sex:'男',
          empFamiAddress:'山西省朔州市朔城区清水湾金宇李香山',
          empDegree:'本科',
          employment:'试用期',
          empHirDate:'2022-10-22',
          empSal:'3500-6500',
          empPerAna:'性格开朗，勤奋好学，努力上进，艰苦奋斗，勇于创新'

        },
        {
          empId: 5,
          seen:false,
          empName: '王小虎',
          empJob: '前端工程师',
          empDept:'朗驰管理系统',
          sex:'男',
          empFamiAddress:'山西省朔州市朔城区清水湾金宇李香山',
          empDegree:'本科',
          employment:'试用期',
          empHirDate:'2022-10-22',
          empSal:'3500-6500',
          empPerAna:'性格开朗，勤奋好学，努力上进，艰苦奋斗，勇于创新'

        }]
    }
  },
  methods: {
    //编辑按钮
    handleEdit($index,row){
      row.seen = !row.seen
      if (row.seen) {
        row.seen = true
      } else {
        row.seen = false
      }
    },
    deleteData(row, $index) {
      this.isShowDeleteDialog = !this.isShowDeleteDialog
      this.isRow = row.num
    },
    //删除按钮
    open(index,row) {
        console.log(row);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //删除某一条数据 1. 在tabletada数组中找到该条数据
          let tabledata1 = this.tableData.filter((item) =>{
            return item.empId == row.empId
          })
          //使用tabledata.findIndex()方法找到要删除的数据所在数组的下标使用数组方法splice删除
          let findindex = this.tableData.findIndex(item =>{
            if(item.empId == tabledata1.empId){
              return true
            }
          })
          this.tableData.splice(findindex,1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  },
};
</script>

<style lang="less" scoped>
.enterpost_container {
  background-color: #fff;
  height: 88.8vh;
  .top {
    height: 7%;
    font-size: 16px;
    background-color:#fff;
  }
  .container_main{
    height: 93%;
    background-color: #fff;
  }
}
</style>